<template>
  <div class="map">
    <!-- 初始化echarts盒子，需要有宽高 -->
    <div ref="mapbox" style="width:100%;height:600px"></div>
  </div>
</template>

<script>
// 导入echarts
import echarts from "echarts";
// 导入中国地图
import "../../node_modules/echarts/map/js/china";
// 导入请求方式
import jsonp from "jsonp";
export default {
  data() {
    return {
      option: {
        title: {
          text: "中国疫情地图",
          link: "https://baidu.com",
          subtext: "中国加油!",
          sublink: "https://baidu.com",
          left: 300, // 控制标题离左侧距离
          textStyle: {
            fontSize: 30,
            color: "#424874"
          },
          subtextStyle: {
            fontSize: 20,
            color: "red"
          }
        },
        series: [
          {
            type: "map", // 告诉echarts，要去渲染的是一个地图
            map: "china", // 渲染中国地图
            name: "现存确诊人数", // 鼠标经过显示的名称
            label: {
              show: true, // 控制对应地区汉字显示
              color: "red", //控制地区字体颜色
              fontSize: 12 //控制字体大小
            },
            itemStyle: {
              areaColor: "#eee" // 控制地图背景颜色
            },
            emphasis: {
              // 控制鼠标经过时的地图背景颜色和字体颜色
            },
            roam: true, // 开启地图拖拽和滚轮放大缩小
            zoom: 1, //控制地图放大缩小
            data: [] // 用来展示后台传输的数据{name:xxx,value:xxx}
          }
        ],
        visualMap: [
          {
            type: "piecewise", //分段显示类型
            show: true, //是否显现
            splitNumber: 6, // 控制分为几段
            pieces: [
              // 自定义分段
              { gte: 10000 },
              { min: 1000, max: 9999 },
              { min: 100, max: 999 },
              { min: 10, max: 99 },
              { min: 1, max: 9 },
              { value: 0 }
            ],
            left: 300,
            inRange: {
              // 控制分段图标的样式
              color: ["#fff", "#ffc7c7", "#f64b3c", "#84142d"] //从什么色到什么色自动分配（由下往上）
            }
          }
        ],
        tooltip: {
          trigger: "item" //控制鼠标经过显示文本
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        }
      }
    };
  },
  name: "HelloWorld",
  mounted() {
    // 获取地图数据
    this.getData();
    // 初始化echarts实例
    this.mychart = echarts.init(this.$refs.mapbox);
    // 通过setOption()渲染实例
    this.mychart.setOption(this.option);
  },
  methods: {
    getData() {
      jsonp(
        "https://gwpre.sina.cn/interface/fymap2020_data.json?_=1583759915081",
        {},
        (err, data) => {
          if (!err) {
            // 代表请求数据成功
            console.log(data);
            const list = data.data.list.map(item => {
              return {
                name: item.name,
                value: item.econNum
              };
            });
            this.option.series[0].data = list;
            // 这行代码能执行的前提是DOM已经渲染完成，只有DOM渲染完成才能够执行echarts初始化
            this.mychart.setOption(this.option);
          }
        }
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map {
  text-align: center;
}
</style>
